<template>
  <div
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    class="content"
  >
    <!-- 123123213 -->
    <map1 @alert_obj="alert_obj" v-if="map_lock" :weather_list="weather_list"></map1>
    <div>
      <el-dialog :title="weather_obj.name" :visible.sync="dialog_weather" width="30%">
        <!-- <span>这是一段信息</span> -->
        <div v-if="!weather_obj.is_gateway" class="img_box">
          <img style="width:100%;" height="250" :src="weather_obj.icon" alt="暂无封面" title="气象站封面">
        </div>
        <div class="detail_">
          <div>
            在线状态:
            <img :src="weather_obj.icon_i" alt>
          </div>
          <div>
            <strong>经度: {{weather_obj.lng}}</strong>
          </div>
          <div>
            <strong>纬度: {{weather_obj.lat}}</strong>
          </div>
          <div>
            <strong>所属站点: {{weather_obj.sname}}</strong>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog_weather = false">取 消</el-button>
          <el-button type="primary" @click="router_detail">查看详细信息</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import map1 from "./map";

export default {
  components: {
    map1: map1
  },
  created() {
    this.one_data();
  },
  data() {
    return {
      weather_list: [],
      // 地图锁
      map_lock: false,
      loading: true,
      // 气象站弹出框
      dialog_weather: false,
      // 网关弹出框
      dialog_gateway: false,
      // 传过来的信息
      weather_obj: {}
    };
  },

  methods: {
    // 点击查看详细信息
    router_detail() {
      if (this.weather_obj.is_gateway) {
        // window.sessionStorage.setItem("active", "gateway_list");
        this.$router.push("gateway_list");
      } else {
        // window.sessionStorage.setItem("active", "weather");

        this.$router.push("weather");
      }
      console.log(this.weather_obj.is_gateway);
    },
    // 点击marker 弹出dialog
    alert_obj(obj) {
      this.weather_obj = obj;
      this.dialog_weather = true;
      console.log(this.weather_obj);

      // console.log(obj);
    },
    async one_data() {
      // 获取所有站点
      let { data: res2 } = await this.$http("/station/list");
      // console.log(res2);

      // 获取所有气象站
      let { data: res } = await this.$http("/collectorSingle/list");
      // 获取所有网关
      let { data: res1 } = await this.$http("/gateWay/list");

      // this.weather_list = res.datas;
      // res.datas.forEach(item => {
      //   item.icon_i = require("../assets/img/line" + item.flag + ".png");
      // });
      // 判断网关的在线状态
      res1.datas.forEach(item => {
        item.isOnline ? (item.flag = "01") : (item.flag = "00");
        item.is_gateway = true;
        // item.icon_i = require("../assets/img/line" + item.flag + ".png");
      });
      // 展开运算符 ，将气象站和 网关放到一个数组
      this.weather_list = [...res.datas, ...res1.datas];
      this.weather_list.forEach(item => {
        item.icon_i = require("../assets/img/line" + item.flag + ".png");
        res2.datas.some(item2 => {
          if (item.sId == item2.id) {
            item.sname = item2.name;
            return true;
          }
          return false;
        });
      });

      // console.log(this.weather_list);
      // 渲染地图
      this.map_lock = true;
      // 解除等待
      this.loading = false;

      // this.weather_list = [...this.weather_list];
      // console.log(res);
    }
  }
};
</script>

<style lang='less' scoped>
.content {
  position: relative;
  height: 100%;
  .map_box {
    position: absolute;
    height: 100%;
  }
}

// .img_box {
//   // height: 250px;
// }
.detail_ {
  display: flex;
  flex-direction: column;
  line-height: 34px;
}
</style>
